<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Macaroons</title>
    <link rel="stylesheet" href="dist/style.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<header class="header">
    <div class="container">
        <div class="logo">
            <img src="images/logo.png" alt="Logo">
        </div>
        <div class="burger" id="burger">
            <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="40px" height="22px">
                <path fill-rule="evenodd" fill="rgb(130, 19, 40)"
                      d="M0.0,0.0 L39.999,0.0 L39.999,1.999 L0.0,1.999 L0.0,0.0 Z"/>
                <path fill-rule="evenodd" fill="rgb(130, 19, 40)"
                      d="M0.0,10.0 L39.999,10.0 L39.999,12.0 L0.0,12.0 L0.0,10.0 Z"/>
                <path fill-rule="evenodd" fill="rgb(130, 19, 40)"
                      d="M0.0,19.999 L39.999,19.999 L39.999,21.999 L0.0,21.999 L0.0,19.999 Z"/>
            </svg>
        </div>
        <nav class="menu" id="menu">
            <div class="close">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872
                                c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872
                                c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052
                                L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116
                                c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952
                                c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116
                                c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z"/>
                        </g>
                    </g>
                </svg>
            </div>
            <ul>
                <li class="menu-item">
                    <a href="#products">Пироженки</a>
                </li>
                <li class="menu-item">
                    <a href="#advantages">О нас</a>
                </li>
                <li class="menu-item">
                    <a href="#order">Оформить заказ</a>
                </li>
            </ul>
        </nav>
        <div class="header-phone">+375 (29) 368-98-68</div>
    </div>
</header>

<section class="main">
    <div class="container">
        <div class="main-info">
            <h1>Мягкие французские пироженки Macaroons</h1>
            <div class="main-info-text">
                Побалуйте себя и своих близких самыми вкусными и ароматными домашними пироженками Macaroon!
            </div>
            <div class="main-action">
                <button class="btn">Выбрать макарун</button>
            </div>
        </div>
        <div class="main-image">
            <img src="images/macaroons_big.png" alt="Big macaroons">
        </div>
    </div>
</section>

<section class="advantages" id="advantages">
    <div class="container">
        <div class="advantages-info">
            <div class="advantages-info-description">
                <h2>Мы печём для вас вкуснейшие макаруны уже более 10 лет</h2>
                <div class="advantages-info-description-text">
                    Все пироженки мы готовим только из натуральных и качественных продуктов, без консервантов,
                    ароматизаторов, красителей. Используем в приготовлении сливочное масло 82,5%, без дрожжей,
                    маргарина, разрыхлителей и улучшителей муки.
                </div>
            </div>
            <div class="advantages-info-image">
                <img src="images/macaroon_big.png" alt="Big macaroon">
            </div>
        </div>
        <div class="advantages-items">
            <div class="advantages-item">
                <div class="advantages-item-circle">
                    <div class="advantages-item-circle-number">1</div>
                </div>
                <div class="advantages-item-title">
                    Лучшие продукты
                </div>
                <div class="advantages-item-text">
                    Мы честно готовим макаруны только из натуральных и качественных продуктов. Мы не используем
                    консерванты, ароматизаторы и красители.
                </div>
            </div>
            <div class="advantages-item">
                <div class="advantages-item-circle">
                    <div class="advantages-item-circle-number">2</div>
                </div>
                <div class="advantages-item-title">
                    Много вкусов
                </div>
                <div class="advantages-item-text">
                    Наша задача – предоставить вам широкое разнобразие вкусов. Вы удивитесь, но у нас более 70 вкусов
                    пироженок.
                </div>
            </div>
            <div class="advantages-item">
                <div class="advantages-item-circle">
                    <div class="advantages-item-circle-number">3</div>
                </div>
                <div class="advantages-item-title">
                    Бисквитное тесто
                </div>
                <div class="advantages-item-text">
                    Все пирожные готовятся на бисквитном тесте с качественным сливочным маслом 82,5%. В составе нет
                    маргарина и дрожжей!
                </div>
            </div>
            <div class="advantages-item">
                <div class="advantages-item-circle">
                    <div class="advantages-item-circle-number">4</div>
                </div>
                <div class="advantages-item-title">
                    Честный продукт
                </div>
                <div class="advantages-item-text">
                    Вкус, качество и безопасность наших пирогов подтверждена декларацией о соответствии, которую мы
                    получили 22.06.2016 г.
                </div>
            </div>
        </div>
    </div>
</section>

<section class="products" id="products">
    <div class="container">
        <h2>Выберите свой макарун</h2>
        <div class="products-items">
            <div class="products-item">
                <div class="products-item-image">
                    <img src="images/1.png" alt="Macaroon">
                </div>
                <div class="products-item-title">
                    Макарун с малиной
                </div>
                <div class="products-item-actions">
                    <div class="products-item-info">
                        <div class="products-item-info-first">1 шт.</div>
                        <div class="products-item-info-second">1,70 руб.</div>
                    </div>
                    <button class="btn products-item-btn">Заказать</button>
                </div>
            </div>
            <div class="products-item">
                <div class="products-item-image">
                    <img src="images/2.png" alt="Macaroon">
                </div>
                <div class="products-item-title">
                    Макарун с манго
                </div>
                <div class="products-item-actions">
                    <div class="products-item-info">
                        <div class="products-item-info-first">1 шт.</div>
                        <div class="products-item-info-second">1,70 руб.</div>
                    </div>
                    <button class="btn products-item-btn">Заказать</button>
                </div>
            </div>
            <div class="products-item">
                <div class="products-item-image">
                    <img src="images/3.png" alt="Macaroon">
                </div>
                <div class="products-item-title">
                    Пирог с ванилью
                </div>
                <div class="products-item-actions">
                    <div class="products-item-info">
                        <div class="products-item-info-first">1 шт.</div>
                        <div class="products-item-info-second">1,70 руб.</div>
                    </div>
                    <button class="btn products-item-btn">Заказать</button>
                </div>
            </div>
            <div class="products-item">
                <div class="products-item-image">
                    <img src="images/4.png" alt="Macaroon">
                </div>
                <div class="products-item-title">
                    Пирог с фисташками
                </div>
                <div class="products-item-actions">
                    <div class="products-item-info">
                        <div class="products-item-info-first">1 шт.</div>
                        <div class="products-item-info-second">1,70 руб.</div>
                    </div>
                    <button class="btn products-item-btn">Заказать</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="order" id="order">
    <div class="container">
        <div class="order-image">
            <img src="images/macaroon_order.png" alt="Macaroons">
        </div>
        <div class="order-text">
            <div class="order-form" id="order-form">
                <div class="order-text-title">
                    Закажите макарун!
                </div>
                <div class="order-text-description">
                    Выберите понравившийся макарун, заполните форму и ожидайте звонка нашего пекаря!
                </div>
                <form action="" class="order-text-form">
                    <div class="order-text-form-choice">
                        <label for="product" class="order-text-form-label">Ваш выбор</label>
                        <input type="text" class="order-input" placeholder="Напишите, что хотите заказать..." id="product" required>
                        <div class="error-input">Необходимо ввести название продукта</div>
                    </div>
                    <div class="order-text-form-data">
                        <div class="order-text-form-data-title">Заполните данные для заказа</div>
                        <label for="name" class="order-text-form-label"></label>
                        <input type="text" class="order-input" placeholder="Ваше имя" id="name" required>
                        <div class="error-input">Необходимо ввести имя</div>
                        <label for="phone" class="order-text-form-label"></label>
                        <input type="text" class="order-input" placeholder="+375 (__) ___ - __ - __" id="phone" required>
                        <div class="error-input">Необходимо ввести телефон</div>
                    </div>
                    <button type="button" class="btn order-btn" id="submit">Оформить заказ</button>
                </form>
            </div>
            <div class="gratitude" id="gratitude">
                <div class="gratitude-container">
                    <div class="gratitude-body">
                        <p>Спасибо за Ваш заказ.</p>
                        <p>Мы скоро свяжемся с Вами!</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="strawberry-top">
            <img src="images/strawberry-top.png" alt="Strawberry">
        </div>
        <div class="strawberry-bottom">
            <img src="images/strawberry-bot.png" alt="Strawberry">
        </div>
    </div>
</section>

<footer class="footer">
    <div class="container">
        <div class="footer-logo">
            <div class="logo">
                <img src="images/logo.png" alt="Logo">
            </div>
            <div class="footer-rights">Все права защищены, 2020</div>
        </div>
        <div class="footer-link">
            <a href="#">
                <img src="images/instagram.png" alt="Icon instagram">
                <div class="footer-link-text">
                    Мы в Instagram
                </div>
            </a>
        </div>
        <div class="footer-phone">+375 (29) 368-98-68</div>
    </div>
</footer>

<div class="present">
    <div class="present-box">
        Оформите заказ
        и получите подарок!
    </div>
    <div class="present-image">
        <img src="images/present.png" alt="Present">
    </div>
</div>

<div class="loader">
    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="scripts/index.js"></script>

</body>
</html>